<template> 
    <div class="paste-card float-left" @click="jumpDetail(item)">
        <div class="head">
            <div class="head-box">
                <div class="head-img"> 
                    <image  class="img-icon"  mode="aspectFit" :src="'https://renqing123.oss-cn-shenzhen.aliyuncs.com/'+item.user_avatar" v-if="item.user_avatar"></image> 
                    <image  class="img-icon"  mode="aspectFit" src="https://rqys.hleason.com/dist/images/head-default.png" v-else></image> 
                </div>
                <div class="describe">
                    <p class="title">{{item.user_name}}</p>
                    <p class="text-info">{{item.create_time}}</p>
                </div>
            </div>  
        </div>
        <div class="content">
            <div class="text"><span style="color:#DC4644;margin-right:10rpx;">{{item.topics.title}}</span>{{item.content}}</div>
            <div class="img-box"> 
                <image  class="content-img"  mode="aspectFit"  :src="'https://renqing123.oss-cn-shenzhen.aliyuncs.com/'+imgItem" v-for="(imgItem,index) in item.imgList"></image>
            </div>
            <div class="operation" v-if="optShow">
                <!--<div class="opt-item text-center" @click="optBtn('share')"><i class="iconfont-fenxiang iconfont"></i><span>{{item.shares}}</span></div>-->
                <div class="opt-item text-center" @click.stop="optBtn('note',item)"><i class="iconfont-liuyan iconfont"></i><span>{{item.comments}}</span></div>
                <div class="opt-item text-center " @click.stop="optBtn('collect',item)" v-if="item.is_collect==0"><i class=" iconfont iconfont-shoucang1"  ></i><span>{{item.collects}}</span>
                </div>
                 <div class="opt-item text-center" @click.stop="optBtn('collect',item)" v-else><i class=" iconfont iconfont-shoucang"  ></i><span>{{item.collects}}</span>
                </div>
            </div> 
        </div>
    </div> 
</template>

<script> 
export default {
    props: { 
        share:{
            default:0
        },
        note:{
            default:0
        },
        collect:{
            default:0
        },
        //收藏切换
        scActive:{
            default:false,
            type:Boolean
        },

        item:{
            default:{},
            type:Object
        },
        optShow:{
            default:true,
            type:Boolean
        }
    },
    data(){
        return{ 
            
        } 
    },
    methods:{
        optBtn(val,a){ 
            this.$emit('optBtn',val,a);
        },
        jumpDetail(item){ 
            // let url=''; 
            // url= `./../card-detail/main?forumId=${item.forum_id}`; 
            // wx.navigateTo({url})  
            this.$emit('jump',item);
        },
    }

}
</script>

<style scoped lang="scss">
.paste-card{ 
    width:100%;
    box-sizing:border-box;  
    padding:20rpx;
    border:1rpx solid #ddd;
    background:#fff;
    margin-bottom:20rpx;
    .head{
        width:100%; 
        .head-box{
            display: flex; 
            align-items:Center; 
            .head-img{
                width:80rpx;
                height:80rpx;  
                .img-icon{
                    width:100%;
                    height:100%;
                    border-radius:50%;
                    border:0;  
                } 
            } 
            .describe{ 
                display:inline-block; 
                margin-left:16rpx;
                .title{
                    font-size:28rpx;
                    color:#A6A6A6; 
                }
                .text-info{
                    font-size:24rpx;
                    color:#CBCAC9;
                }
            }
        }
       
    }
    .content{  
        width:100%;
        margin-top:10rpx;  
        .text{
            font-size:28rpx;
            color:#333;
            span{
                font-weight:bold;
                color:#000;
            }
        }
        .img-box{
            display:flex;
            margin:20rpx 0;
            padding:20rpx 0;
            border-bottom:1rpx solid #ddd;
            .content-img{
                flex:1; 
                height:180rpx;
                max-width:30%;
                margin-right:3%;
                &:last-child{
                    margin-right:0;
                }
            }
        }
        .operation{
            display:flex;
            justify-content:center;
            align-items:center; 
            .opt-item{
                flex:1;
                color:#A1A1A1;
                .iconfont{
                    margin-right:10rpx;
                    font-size:34rpx;
                }
                span{
                    font-size:28rpx;
                }
                .iconfont-shoucang{
                    color:#CD4640;
                }
            }
        } 
    }
}
</style>
